<template>
  <div>
    <div>{{ msg }}</div>
    <br />
    <hr />
    <hr />
    <button @click="f1">浪起来</button><br />
    <button @click="f2">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我要蓝buff谢谢~~",
      timer: null,
    };
  },
  methods: {
    f1() {
      // console.log(this.msg);
      //   console.log("我是浪起来");

      // let a = this.msg;

      // console.log(1);
      // console.log(this.msg); //没有this.msg
      // setInterval(() => {
      // const a = this.msg.split("");
      // console.log(this.msg);
      // // console.log();
      // // this.msg.splice(0, 1).join("")
      // this.msg =  a.push(a.splice(0, 1));

      // this.msg =this.msg.split('').splice(0,1);
      // console.log()
      // this.msg = this.msg.push.join('');
      // const a = this.msg.split('').shift()
      // this.msg.push(a)
      // this.msg.join('')

      // console.log(array)
      // const b = [1, 2, 3, 4, 5];
      // b.splice(0, 1);
      // // console.log(b.splice(0, 1));
      // console.log(b); //3,4,5 splice返回的是一个删除的值，但它把数组改变成了没有删除值的数组
      //  第一种：
      // const timer =  setInterval(() => {
      //     const array = this.msg.split("");
      //     const a = array.splice(0, 1).join("");
      //     console.log(this.msg);
      //     // console.log(a)//我
      //     this.msg = [...array, ...a].join('');
      //   }, 300);
      //   this.timer = timer

      //  第二种
      // const array = this.msg.split("");
      // // console.log(array);
      //  array.splice(0, 1).join('');
      // console.log(a);
      // console.log(array);
      //  array.push(a)
      // console.log(array)
      // console.log(array.join(''))
    const timer =    setInterval(()=>{
        const array = this.msg.split("");//变成数组
    const a =   array.splice(0, 1).join('');//拿到第一个值，把原数组改成没有第一个元素的
      // this.msg = array.join('')
      array.push(a) //push返回的是数组长度
      this.msg = array.join('')
      console.log(this.msg)
      },300)
      this.timer = timer

      

      //  console.log(this.msg)
      // }, 1000);
      //锝到第一个"我"
      // const a = this.msg.push(this.msg.split("").splice(0, 1));

      // console.log(a);
      // this.msg = a.split("");
      // console.log(this.msg[length-1]);//是最后一个元素
      // console.log(this.msg[length - 1]);
      // console.log(this.msg);
    },
    f2() {
      //   console.log("我是停止");
      clearInterval(this.timer)
    },
  },
};
</script>

<style scoped></style>
